<!DOCTYPE html>
<html spellcheck="false">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />

        <title>Serve</title>

        <!-- common.css -->
        <link rel="stylesheet" href="{assetsPath}/style/common.css" />
        <!-- bulma.css -->
        <link rel="stylesheet" href="{jsLibPath}/bulma.min.css" data-webc-link="inner" />
        <!-- font-awesome-4.7.0 -->
        <link rel="stylesheet" href="{jsLibPath}/font-awesome-4.7.0/css/font-awesome.min.css" data-webc-link="inner" />
        <!-- renderer -->
        <link rel="stylesheet" href="{publicPath}/index.css" data-webc-link="inner" />
    </head>

    <body id="serveWindow" class="serve-window">
        <div class="main-container flex-col">
            <!-- 操作组 -->
            <div class="operate-box is-mobile flex-col-fixed flex-row">
                <button class="button is-small flex-row-fixed" onclick="_event.openDddServerDialog()">添加服务</button>
            </div>

            <!-- 服务列表 -->
            <div class="flex-col-auto">
                <div class="server-list-wrap">
                    <!-- JS 动态渲染 -->
                </div>
            </div>
        </div>
    </body>

    <!-- 服务项 -->
    <template id="server-item-template">
        <div class="server-item flex-row">
            <div class="flex-row-auto">
                <div class="server-name">
                    <span>{ serverName }</span>
                    <span class="is-run { isRun }" style="display: none"></span>
                </div>
                <div>
                    <span class="server-port">端口号：{ port }</span>
                    <span class="assets-dir">访问目录：{ assetsDirPath }</span>
                </div>
            </div>
            <div class="flex-row-fixed">
                <!-- 开启/关闭 -->
                <span class="icon open" onclick="_event.toggleServer('{ serverName }')">
                    <i class="fa fa-fw fa-flag"></i>
                </span>
                <!-- 编辑 -->
                <span class="icon edit" onclick="_event.openModServerDialog('{ serverName }')">
                    <i class="fa fa-fw fa-pencil"></i>
                </span>
                <!-- 删除 -->
                <span class="icon del" onclick="_event.delServer('{ serverName }')">
                    <i class="fa fa-fw fa-trash-o"></i>
                </span>
            </div>
        </div>
    </template>

    <!-- 添加服务对话框 -->
    <template id="add-server-dialog-slot">
        <span slot="title">添加服务</span>
        <div slot="content">
            <div class="add-server-form">
                <div class="field">
                    <label class="label">服务名</label>
                    <div class="control">
                        <input class="input is-small server-name" type="text" />
                    </div>
                </div>
                <div class="field">
                    <label class="label">端口</label>
                    <div class="control">
                        <input class="input is-small server-port" type="number" />
                    </div>
                </div>
                <div class="field">
                    <label class="label">访问目录</label>
                    <div class="control flex-row">
                        <input class="flex-row-auto input is-small assets-dir" type="text" />
                        <button class="flex-row-fixed button is-small find-assets" onclick="_event.findAssets()"><i class="fa fa-fw fa-ellipsis-h"></i></button>
                    </div>
                </div>
            </div>
        </div>
        <div slot="footer">
            <button class="add-server-cancel button is-small" onclick="_event.addServerCancel()">取消</button>
            <button class="add-server-confirm button is-small is-primary" onclick="_event.addServerConfirm()">确认</button>
        </div>
    </template>

    <!-- 编辑服务对话框 -->
    <template id="mod-server-dialog-slot">
        <span slot="title">编辑服务</span>
        <div slot="content">
            <div class="mod-server-form">
                <div class="field">
                    <label class="label">服务名</label>
                    <div class="control">
                        <input class="input is-small server-name" type="text" disabled value="{ serverName }" />
                    </div>
                </div>
                <div class="field">
                    <label class="label">端口</label>
                    <div class="control">
                        <input class="input is-small server-port" type="number" value="{ port }" />
                    </div>
                </div>
                <div class="field">
                    <label class="label">访问目录</label>
                    <div class="control flex-row">
                        <input class="flex-row-auto input is-small assets-dir" type="text" value="{ assetsDirPath }" />
                        <button class="flex-row-fixed button is-small find-assets" onclick="_event.findAssets()"><i class="fa fa-fw fa-ellipsis-h"></i></button>
                    </div>
                </div>
            </div>
        </div>
        <div slot="footer">
            <button class="mod-server-cancel button is-small" onclick="_event.modServerCancel()">取消</button>
            <button class="mod-server-confirm button is-small is-primary" onclick="_event.modServerConfirm('{ serverName }')">确认</button>
        </div>
    </template>

    <!-- jquery-3.6.0 -->
    <script type="text/javascript" src="{jsLibPath}/jquery-3.6.0.min.js" defer></script>
    <script type="text/javascript" src="{jsLibPath}/jquery-3.6.0.min.js" defer></script>
    <!-- renderer -->
    <script type="module" src="{publicPath}/index.js"></script>
</html>
